import {designPage, reactive, useRefs} from "@peryl/react-compose";
import {$message, $notice, Button, ButtonGroup, Form, FormInput, FormItem, i18n, PageCard, PageCardContent, PageCardTitle, Paragraph} from "plain-design";
import {http} from "../../modules/plain-design/http";

export default designPage(() => {

  const testGet = async () => {
    const data = await http.get('/testGet', { code: 'hello', flag: 1 });
    $notice(data.message!);
  };

  const testPostJson = async () => {
    const data = await http.post('/testPostJson', { code: 'hello', flag: 1 });
    $notice(data.message!);
  };

  const testPostForm = async () => {
    const data = await http.post('/testPostJson', { code: 'hello', flag: 1 }, { formRequest: true });
    $notice(data.message!);
  };

  const testNoMock = async () => {
    const data = await http.post('/testNoMock', { code: 'hello', flag: 1 });
    $notice(data.message!);
  };

  const { refs, onRef } = useRefs({ form: Form });

  const state = reactive({
    loginInfo: {
      username: 'user',
      password: 'micro.pro'
    }
  });

  const login = async () => {
    await refs.form?.validate();
    await http.post('/login', { ...state.loginInfo });
    $message.success('Login Success!');
  };

  return () => <>
    <PageCard>
      <PageCardTitle title={i18n.$intl('page.requestInterceptorPage.title').d("当前页面目的简介")}/>
      <PageCardContent>
        <Paragraph list="page.requestInterceptorPage.descriptions"/>
      </PageCardContent>
    </PageCard>
    <PageCard>
      <PageCardContent>
        <ButtonGroup>
          <Button label="Get Request" asyncHandler={testGet}/>
          <Button label="Post Json Request" asyncHandler={testPostJson}/>
          <Button label="Post Form Request" asyncHandler={testPostForm}/>
          <Button label="No Mock Request" asyncHandler={testNoMock}/>
        </ButtonGroup>
      </PageCardContent>
    </PageCard>
    <PageCard>
      <PageCardContent>
        <Form ref={onRef.form} modelValue={state.loginInfo} singleColumnContentWidth={375} hideLabel>
          <FormInput label="Username" placeholder="Username" required v-model={state.loginInfo.username}/>
          <FormInput label="Passwrod" placeholder="Passwrod" type="password" required v-model={state.loginInfo.password}/>
          <FormItem label={null}>
            <Button block label="Login" mode="fill" asyncHandler={login}/>
          </FormItem>
        </Form>
      </PageCardContent>
    </PageCard>
  </>;
});
